<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app" ref="dom">
    {{msg}}
    <com-a></com-a>
    <com-b></com-b>
  </div>
  <script src="./vue.js"></script>
  <script>


    // 给所有vue实例混入一段业务
    Vue.mixin({
      // 全局混入的时候，关于dom操作，在mouted中遇到问题。
      // 这样写，所有的组件和vue实例，都会混mounted,都需要dom的ref属性。
      // 但是其他的选项是可以混入的
      mounted () {
        // 组件容器dom对象
        const dom = this.$refs.dom
        // 获取高度,赋值给height数据
        this.height = dom.offsetHeight
      },
      data () {
        return {
          msg: '混入数据'
        }
      },
      methods: {
        say () {
          return '混入的函数'
        }
      }
    })

    
    Vue.component('com-a',{
      template: `<div ref="dom" style="height:100px">组件A {{height}} {{msg}} {{say()}}</div>`,
      data() {
        return {
          height: 0
        }
      },
      // 获取组件的高度,显示在组件中
    })

    Vue.component('com-b',{
      template: `<div ref="dom" style="height:120px">组件B {{height}} {{msg}}</div>`,
      data() {
        return {
          height: 0
        }
      },
      // 获取组件的高度,显示在组件中
    })

    const vm = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>